<!DOCTYPE html>
<html>
<head>
	<title>自定义指令</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="../static/vue.js"></script>
</head>
<body>
	<h1>自定义指令</h1>
	<div id="app">
		<div v-ch="color">{{number}}</div>
		<p><button @click="add">ADD</button></p>
	</div>
	<p>
		<button onclick="unbind()">解绑</button>
	</p>
	<script type="text/javascript">
		/*Vue.directive("ch",function(el,binding){
			// el:dom元素
			console.log(el);
			console.log(binding);
			console.log(binding.name);
			console.log(binding.value);
			console.log(binding.expression);
			el.style="color:"+binding.value;
		});*/
		function unbind(){
			app.$destroy();
		}
		Vue.directive("ch",{
			bind:function(){//被绑定
			     console.log('1 - bind');
			},
			inserted:function(){//绑定到节点
			      console.log('2 - inserted');
			},
			update:function(){//组件更新
			      console.log('3 - update');
			},
			componentUpdated:function(){//组件更新完成
			      console.log('4 - componentUpdated');
			},
			unbind:function(){//解绑
			      console.log('5 - unbind');
			}
		})
		var app = new Vue({
			el:"#app",
			data:{
				number:1,
				color:"green",
			},
			methods:{
				add:function(){
					this.number++;
				}
			}
		})
	</script>
</body>
</html>